<template>
  <div class="slice-overview">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
          label-width="120px"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card style="padding: 20px 0 60px 0">
      <div v-for="item in chartData" :key="item.id" class="charts-box">
        <customChart
          :title="item.eqpId"
          :chart-data="item.eqpStatus"/>
      </div>
    </el-card>
  </div>
</template>
<script>
import mySetting from '@/mixins/mySetting'
import { pickTime } from '@/utils/pickTime'
import customChart from './components/customChart'
import { getList } from '@/api/OEE/sliceOverview'
import { getEquipmentTypesList } from '@/api/production/layoutDesign'
import { getEqpModelList } from '@/api/equipment/eqpbase'
import { statusColors } from '@/assets/echarts/eqpStatusTheme'
export default {
  name: 'SliceOverview',
  components: { customChart },
  mixins: [mySetting],
  data() {
    const searchTags = [
      // { label: this.$t('eqpType'), prop: 'eqpType', tag: 'DynSelect' },
      // { label: this.$t('eqpModel'), prop: 'eqpModel', tag: 'DynSelect' },
      { label: this.$t('eqpName'), prop: 'eqpName', tag: 'DynInput' },
      { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', render: () => {
        return (
          <el-date-picker
            vModel={this.timer}
            clearable={false}
            type='datetimerange'
            placeholder={`${this.$t('pleaseSelect')}` + `${this.$t('timeInterval')}`}
            start-placeholder={this.$t('StartDate')}
            end-placeholder={this.$t('EndDate')}
            value-format={'yyyy-MM-dd HH:mm:ss'}
            format={'yyyy-MM-dd HH:mm:ss'}
            default-time={['00:00:00', '23:59:59']}>
          </el-date-picker>
        )
      } }
    ]
    return {
      infoForm: {},
      searchTags: Object.freeze(searchTags),
      timer: pickTime(1),
      chartData: [],
      selectList: {}
    }
  },
  created() {
    this.initList()
    this.getEquipmentTypes()
    this.getEqpTypesList()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.infoForm, startTime: this.timer[0], endTime: this.timer[1] }))
      const temp = res.data.reduce((total, current, index) => {
        const tempTitle = current.eqpId
        return total.concat([{ ...current, eqpStatus: current.eqpStatus.map((c, i) => {
          return {
            name: c.eqpStatus,
            value: [
              index,
              c.startTime,
              c.endTime,
              c,
              tempTitle
            ],
            itemStyle: {
              normal: {
                color: statusColors[c.eqpStatus]
              }
            }
          }
        }) }])
      }, [])
      this.chartData = temp
    },
    doSearch() {
      this.initList()
    },
    // 获取设备类型列表
    async getEquipmentTypes() {
      const res = await getEquipmentTypesList()
      this.$set(this.selectList, 'eqpType', res.data)
    },
    async getEqpTypesList() {
      const res = await getEqpModelList()
      this.$set(this.selectList, 'eqpModel', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
  // .el-form-item {
  //   margin-bottom: 15px;
  // }
}
.charts-box{
  width: 100%;
  height: 140px;
  margin-bottom: 20px;
}
</style>
